<template>
  <div class="app-container">
    <template v-if="showPage == true">
      <div class="search-bar">
        <el-form ref="formRef" :model="couponForm" label-width="auto" :inline="true">
          <el-form-item label="券码">
            <el-input v-model="couponForm.coupon" placeholder="券码" clearable />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="couponForm.keywords" placeholder="请选择" style="width: 200px">
              <el-option label="到店礼" :value="1" />
              <el-option label="补贴券" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="couponForm.keywords" placeholder="请输入券名称" clearable />
          </el-form-item>
          <el-form-item label="兑换人员">
            <el-input v-model="couponForm.keywords" placeholder="请输入业主名称" clearable />
          </el-form-item>
          <el-form-item label="兑换时间" prop="operationStartTime">
            <el-date-picker
              v-model="couponForm.operationStartTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <Search />
              </template>
              搜索
            </el-button>
            <el-button @click="handleResetQuery">
              <template #icon>
                <Refresh />
              </template>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" class="enter-tabs" @tab-change="handleTabClick">
          <el-tab-pane
            v-for="item in tabList"
            :key="item.name"
            :label="item.label"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
        <BasePageTable
          :table-data="tableData"
          :table-columns-data="tableColumnsData"
          :total="total"
          :loading="loading"
          :page-num="couponForm.pageNum"
          :page-size="couponForm.pageSize"
          @handleQuery="changePage"
        >
          <template #operation="{ row }">
            <el-button @click="lookDetail(row)">查看</el-button>
          </template>
        </BasePageTable>
      </div>
    </template>
    <template v-else>
      <Details />
    </template>
  </div>
</template>

<script setup>
import Details from "../components/details.vue";
import couponApi from "@/api/coupon/coupon";

const showPage = ref(true);
const couponForm = ref({
  coupon: undefined,
  statuses: 1,
  keywords: "",
  operationStartTime: "",
  pageNum: 1,
  pageSize: 10,
});
const activeName = ref("全部");
const tabList = ref([
  { name: "全部", label: "全部" },
  { name: "已兑换", label: "已兑换" },
  { name: "待确认", label: "待确认" },
  { name: "已过期", label: "已过期" },
  { name: "已确认", label: "已确认" },
]);
const tableData = ref([]);
const tableColumnsData = ref([
  {
    prop: "index",
    label: "序号",
    showOverflowTooltip: true,
    customSlot: "index",
  },
  {
    prop: "index",
    label: "编码",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "类型",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "名称",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "券码",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "可兑换时间",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "券额",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "可用时间",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "数量",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "剩余库存",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "预算范围(元)",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "状态",
    showOverflowTooltip: true,
  },
  {
    prop: "operation",
    label: "操作",
    width: 200,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);
const loading = ref(false);
const total = ref(0);

function handleSearch() {
  getList();
}
function handleResetQuery() {}
function changePage(val) {
  couponForm.pageNum = val.pageNum;
  couponForm.pageSize = val.pageSize;
  getList();
}

function handleTabClick() {
  getList();
}

async function getList() {
  try {
    const res = await couponApi.getCouponList(couponForm.value);
    console.log(res);
  } catch (e) {}
}
function lookDetail(row) {}

onMounted(() => {
  getList();
});
</script>
